<template>
  <div class="viewBox">
    <div class="view_title">
      <div class="text-16px">每日任务</div>
    </div>
    <div class="viewsCnt p-20px">
      <div id="ecarts-main" class="w-100% h-300px"></div>
    </div>
  </div>
</template>

<script setup name="DailyTasks">
import * as echarts from 'echarts'
import { getedayformdata } from '@/api/businessSettings/task'
import { useRouter } from 'vue-router'
import 'echarts/theme/macarons.js'
import useUserStore from '@/store/modules/user'
const router = useRouter()
const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const loading = ref(false)

async function init() {
  loading.value = true
  await getList()
}
// 请求接口
function getList() {
  getedayformdata({
    id: userStore.user.userId
  })
    .then(async res => {
      if (res.code == 200) {
        loading.value = false
        proxy.$nextTick(() => {
          echartsInit({
            id: 'ecarts-main',
            color: ['#26a8ff', '#95db9a'],
            name: '任务类型',
            data: res.data
          })
        })
      }
    })
    .catch(() => {
      loading.value = false
    })
}
/**
 * echarts 配置
 * @param {*} dat 数据配置
 */
function echartsInit(dat) {
  let totalVal = 0
  dat.data.map(item => {
    totalVal += item.value
  })
  let chartDom = document.getElementById(dat.id)
  let myChart = echarts.init(chartDom, 'macarons')
  let option = {
    legend: {
      bottom: '1%',
      textStyle: {
        fontSize: '14',
        color: '#999'
      },
      itemWidth: 10,
      itemHeight: 10
    },
    grid: {
      left: '30px',
      right: '20px',
      bottom: '50px'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff', //设置背景图片 rgba格式
      textStyle: {
        color: '#666' //设置文字颜色
      }
    },
    dataset: {
      source: dat.data
    },
    color: dat.color,
    xAxis: {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisPointer: {
        type: 'shadow'
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#999', //左边线的颜色
          width: '1' //坐标线的宽度
        }
      },
      axisLabel: {
        textStyle: {
          color: '#666' //坐标值得具体的颜色
        }
      }
    },
    yAxis: {
      splitArea: {
        show: false
      }, //去除网格区域
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          //分割线
          color: '#f3f3f3',
          width: 1,
          type: 'dashed' //dotted：虚线 solid:实线
        }
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#999', //左边线的颜色
          width: '1' //坐标线的宽度
        }
      },
      axisLabel: {
        textStyle: {
          color: '#666' //坐标值得具体的颜色
        }
      }
    },
    series: [{ type: 'bar' }, { type: 'bar' }]
  }

  option && myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
init()
</script>

<style scoped lang="scss">
.viewBox {
  // height: 420px;
  margin-bottom: 20px;
  :deep(.el-table) {
    margin: 0 !important;
  }
  .read_icon {
    width: 24px;
    height: 23px;
    float: left;
    img {
      vertical-align: center;
      width: 24px;
      height: 18px;
    }
  }
  .urg_icon {
    float: left;
    margin: 0 6px;
    height: 23px;
    img {
      vertical-align: center;
      width: 18px;
      height: 16px;
      margin-top: 2px;
    }
  }
  .view_title {
    background-color: rgba(249, 249, 249, 1);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(223, 220, 220, 0.8);
    border-bottom: none;
    font-family: '微软雅黑 Bold';
    font-weight: 600;
    // box-shadow: 0px 1px 3px 1px rgb(201, 197, 197);
  }
}
.viewsCnt {
  border: 1px solid rgba(223, 220, 220, 0.8);
  margin-bottom: 20px;
}
</style>
